import { Card, Button } from 'flowbite-react'
import { FaBook, FaEye, FaPlus, FaClock,FaTrash } from 'react-icons/fa'

export default function DeckList({ decks, onViewCards, onAddCard,onDeleteDeck, formatDate }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {decks.map(deck => (
        <Card key={deck.id} className="hover:shadow-lg transition-shadow">
          <div className="flex items-start justify-between mb-4">
            <div>
              <h2 className="text-xl font-bold text-gray-900 mb-2">{deck.name}</h2>
              <p className="text-gray-600">{deck.description}</p>
            </div>
            <Button 
              size="xs" 
              color="failure"
              onClick={() => onDeleteDeck(deck.id)}
            >
              <FaTrash />
            </Button>
          </div>

          <div className="flex items-center gap-4 mb-4 text-sm text-gray-500">
            <div className="flex items-center">
              <FaBook className="mr-2" />
              {deck.cardCount} 张卡片
            </div>
            <div className="flex items-center">
              <FaClock className="mr-2" />
              {formatDate(deck.created)}
            </div>
          </div>

          <div className="flex gap-3">
            <Button
              color="blue"
              onClick={() => onViewCards(deck)}
              className="flex-1"
            >
              <FaEye className="mr-2" />
              查看卡片
            </Button>
            <Button
              color="green"
              onClick={() => onAddCard(deck)}
              className="flex-1"
            >
              <FaPlus className="mr-2" />
              添加卡片
            </Button>
          </div>
        </Card>
      ))}
    </div>
  )
}